<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
  <!--a表示向页面插入超链接 href写跳转的路径-->
  <!--路径必须写正确！否则无法跳转！-->
  <!--跳转至外部资源-->
  <a href="https://www.baidu.com/">点我跳到百度首页</a>
  <a href="https://www.tmooc.cn/">达内首页</a>
  <!--跳转至本地文件资源-->
  <a href="02文本标签.html">跳到今日的第2个页面</a>
  <!--跳转至本地图片资源-->
  <a href="2.png">即将打开一张图片</a>
  <hr>
  <!-- 图片超链接:点击图片跳转到指定的链接处 -->
  <a href="https://www.baidu.com">
    <img src="2.png" alt="" width="300px">
  </a>
  <hr>
  <!-- 是否在新窗口打开超链接  target="_blank"打开新的窗口 target="_self"覆盖现在的窗口-->
  <a href="https://www.baidu.com/" target="_blank">百度首页1</a>
  <a href="https://www.baidu.com/" target="_self">百度首页2</a>
  <hr>
  <h2>锚点练习</h2>
  <h1>西游记</h1>
  <a href="#c1">跳转至第1章</a>
  <a href="#c2">跳转至第2章</a>
  <a href="#c3">跳转至第3章</a>
  <a href="#c4">跳转至第4章</a>
  <h3 id="c1">第一章 石猴出世</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque ipsum nobis nulla odit quae velit voluptates! Assumenda commodi dolorum fuga id molestiae odit praesentium repudiandae sint soluta unde. Voluptatem?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque ipsum nobis nulla odit quae velit voluptates! Assumenda commodi dolorum fuga id molestiae odit praesentium repudiandae sint soluta unde. Voluptatem?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque ipsum nobis nulla odit quae velit voluptates! Assumenda commodi dolorum fuga id molestiae odit praesentium repudiandae sint soluta unde. Voluptatem?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque ipsum nobis nulla odit quae velit voluptates! Assumenda commodi dolorum fuga id molestiae odit praesentium repudiandae sint soluta unde. Voluptatem?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque ipsum nobis nulla odit quae velit voluptates! Assumenda commodi dolorum fuga id molestiae odit praesentium repudiandae sint soluta unde. Voluptatem?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque ipsum nobis nulla odit quae velit voluptates! Assumenda commodi dolorum fuga id molestiae odit praesentium repudiandae sint soluta unde. Voluptatem?</p>
  <h3 id="c2">第二章 菩提学艺</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque ipsum nobis nulla odit quae velit voluptates! Assumenda commodi dolorum fuga id molestiae odit praesentium repudiandae sint soluta unde. Voluptatem?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque ipsum nobis nulla odit quae velit voluptates! Assumenda commodi dolorum fuga id molestiae odit praesentium repudiandae sint soluta unde. Voluptatem?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque ipsum nobis nulla odit quae velit voluptates! Assumenda commodi dolorum fuga id molestiae odit praesentium repudiandae sint soluta unde. Voluptatem?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque ipsum nobis nulla odit quae velit voluptates! Assumenda commodi dolorum fuga id molestiae odit praesentium repudiandae sint soluta unde. Voluptatem?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque ipsum nobis nulla odit quae velit voluptates! Assumenda commodi dolorum fuga id molestiae odit praesentium repudiandae sint soluta unde. Voluptatem?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque ipsum nobis nulla odit quae velit voluptates! Assumenda commodi dolorum fuga id molestiae odit praesentium repudiandae sint soluta unde. Voluptatem?</p>
  <h3 id="c3">第三章 龙宫借宝</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque ipsum nobis nulla odit quae velit voluptates! Assumenda commodi dolorum fuga id molestiae odit praesentium repudiandae sint soluta unde. Voluptatem?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque ipsum nobis nulla odit quae velit voluptates! Assumenda commodi dolorum fuga id molestiae odit praesentium repudiandae sint soluta unde. Voluptatem?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque ipsum nobis nulla odit quae velit voluptates! Assumenda commodi dolorum fuga id molestiae odit praesentium repudiandae sint soluta unde. Voluptatem?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque ipsum nobis nulla odit quae velit voluptates! Assumenda commodi dolorum fuga id molestiae odit praesentium repudiandae sint soluta unde. Voluptatem?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque ipsum nobis nulla odit quae velit voluptates! Assumenda commodi dolorum fuga id molestiae odit praesentium repudiandae sint soluta unde. Voluptatem?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque ipsum nobis nulla odit quae velit voluptates! Assumenda commodi dolorum fuga id molestiae odit praesentium repudiandae sint soluta unde. Voluptatem?</p>
  <h3 id="c4">第四章 官封弼马</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque ipsum nobis nulla odit quae velit voluptates! Assumenda commodi dolorum fuga id molestiae odit praesentium repudiandae sint soluta unde. Voluptatem?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque ipsum nobis nulla odit quae velit voluptates! Assumenda commodi dolorum fuga id molestiae odit praesentium repudiandae sint soluta unde. Voluptatem?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque ipsum nobis nulla odit quae velit voluptates! Assumenda commodi dolorum fuga id molestiae odit praesentium repudiandae sint soluta unde. Voluptatem?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque ipsum nobis nulla odit quae velit voluptates! Assumenda commodi dolorum fuga id molestiae odit praesentium repudiandae sint soluta unde. Voluptatem?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque ipsum nobis nulla odit quae velit voluptates! Assumenda commodi dolorum fuga id molestiae odit praesentium repudiandae sint soluta unde. Voluptatem?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cumque ipsum nobis nulla odit quae velit voluptates! Assumenda commodi dolorum fuga id molestiae odit praesentium repudiandae sint soluta unde. Voluptatem?</p>
  <a href="#">快速跳转至页面顶部</a>
</body>
</html>